<template>
  <div class="login-container">
    <el-form
      label-position="right"
      label-width="100px"
      :model="formLogin"
      style="max-width: 460px"
    >
      <h3>系统登录</h3>
      <el-form-item
        label="用户名"
        :rules="[
          { required: true, message: '用户名是必填项', trigger: 'blur' },
          { min: 2, max: 12, message: '姓名长度在2到12', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formLogin.username"
          type="input"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item
        label="密码"
        :rules="[
          { required: true, message: '密码是必填项', trigger: 'blur' },
          { min: 4, max: 12, message: '密码长度在4到12', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formLogin.password"
          type="password"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login"> 登录 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive } from "vue";
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  name: "LoginView",
  setup() {
    const store = useStore();
    const router = useRouter();
    const formLogin = reactive({
      username: "admin",
      password: "123456",
    });
    const proxy = getCurrentInstance().proxy;
    const login = async () => {
      const resp = await proxy.$api.getMenu(formLogin);
      if (resp) {
        //console.log(resp);
        store.commit("setMenu", resp.menuList);
        store.commit("setToken", resp.token);
        store.commit("addMenu", router);

        router.push({
          name: "home",
        });
      }
    };
    return {
      formLogin,
      login,
    };
  },
};
</script>

<style lang="less" scoped>
.login-container {
  width: 350px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 15px;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 0 25px #cacaca;
  margin: 180px auto;
  h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #505450;
  }

  :deep(.el-form-item__content) {
    justify-content: center;
    margin: 0 !important;
  }
}
</style>
